import React from 'react';
import { 
  StyleSheet,
  Image,
  Text,
  TouchableOpacity,
  TextInput,
  View,
  Alert,
  DeviceEventEmitter
} from 'react-native';
import { Icon } from 'react-native-vector-icons'; 
import { inject, observer } from 'mobx-react';

@inject((stores) => {
    return {
      homeStore: stores.rootStore.homeStore,
      loginStore: stores.rootStore.loginStore
    }
  })
@observer  class TakeMoneyScreen extends React.Component {
    static navigationOptions = {
        title: '提币',
        headerBackTitle: '返回',
        
    };
    constructor(props){
		super(props);
        this.state = { 
            address:'',
            coin_num:'',
            sms_code:'',
            realCount: 0,
            getCode: false,
            codeTxt:`获取验证码`,
            count: 59,
            getCode: false,
            intel: null
        } 
	}
    /**
	 * 充值记录
	 */
	_goRecord = () => {
        this.props.navigation.navigate('Record'); 
    }
    componentDidMount(){
        this.props.homeStore.getPreOut();
    }
    componentWillUnmount(){
        DeviceEventEmitter.emit('Home', {id: 1});
    }
    /**
     * 提币
     */
    _takeMoney = () => {
        if(this.state.address === '' || this.state.coin_num === '' || this.state.sms_code === ''){
            Alert.alert(
                '错误!',
                '地址,转账数量,验证码不能为空',
                [
                { text: '关闭'}
                ],
                { cancelable: false }
            )
            return;
        }
        const params = {
            address: this.state.address,
            coin_num: this.state.coin_num,
            sms_code: this.state.sms_code
        }
        this.props.homeStore.takeMoney(params, () => {
            Alert.alert(
                '成功!',
                '提取成功!',
                [
                { text: '关闭',onPress: ()=> { this.props.navigation.navigate('Home') }}
                ],
                { cancelable: false }
            )
        });
    }
    /**
     * 获取验证码
     */
    _getCode = () => {
        if(this.state.getCode){return;}
        const params = {
            type:'coin_out',
            mobile:this.state.mobile
        }
        this.props.loginStore.getCode(params);
        this.setState({
            getCode: true,
            codeTxt: '60秒后重新获取'
        });
        const _this = this;
        const intel = setInterval(()=>{
            if(_this.state.count === 0){
                clearInterval(_this.state.intel);
                _this.setState({
                    codeTxt:`获取验证码`,
                    count: 59,
                    getCode: false,
                    intel: null
                })
                return;
            }
            this.setState({
                codeTxt:`${this.state.count}秒后重新获取`,
                count: this.state.count - 1
            })
        },1000);
        this.setState({
            intel
        })
    }
    render() {
        const { navigate } = this.props.navigation;  //获取navigation的navigate方法
        return (
            <View style={styles.container}> 
                <View style={styles.titleTxt}>
                    <Text style={styles.c2}><Icon.Entypo name='dots-three-vertical'></Icon.Entypo><Text style={styles.titleC2}>提币信息</Text></Text>
                    <TouchableOpacity onPress={this._goRecord}>
                        <Text style={styles.record}>
                            <Icon.Feather style={styles.c1} name='align-right'></Icon.Feather>
                            <Text style={styles.c2}>提币记录</Text>
                        </Text>
                    </TouchableOpacity>
                </View> 
                <View style={styles.formBox}>
                    <View style={[styles.formItem,styles.formUserItem]}>
                        <View style={styles.formLabel}> 
                            <Text>地址</Text>
                        </View>
                        <TextInput
                            style={styles.formUser}
                            placeholder='请输入地址'
                            onChangeText={(text) => this.setState({address: text})}
                            value={this.state.address}
                        />
                    </View>
                    <View style={[styles.formItem,styles.formPswItem]}> 
                        <View style={styles.formLabel}> 
                            <Text>转账数量</Text>
                        </View>
                        <TextInput
                            style={styles.formPsw}
                            placeholder='请输入转账数量'
                            onChangeText={(text) =>{
                                const newText = text.replace(/[^\d]+/, '');
                                this.setState({coin_num: newText});
                                // const realCount = parseInt(newText) * (1 - this.props.homeStore.charge / 100);
                                // this.setState({
                                //     realCount
                                // })
                            }}
                            value={this.state.coin_num}
                            keyboardType='numeric'
                        /> 
                    </View>
                    <View style={[styles.formItem]}>
                        <Text style={styles.formLabel}>手续费</Text>
                        <TextInput
                            editable={false}
                            style={styles.formCode}
                            placeholder='请输入手续费'
                            value={this.props.homeStore.charge + ''}
                        /> 
                    </View> 
                    {/* <View style={[styles.formItem,styles.formPswItem]}> 
                        <View style={styles.formLabel}> 
                            <Text>实际到账</Text>
                        </View>
                        <TextInput
                            style={styles.formPsw}
                            editable={false}
                            placeholder='请输入转账数量'
                            value={this.state.realCount + ' NSS'}
                        /> 
                    </View> */}
                    <View style={[styles.formItem,styles.formCodeItem]}>
                        <Text style={styles.formLabel}>验证码</Text>
                        <TextInput
                            style={styles.formCode}
                            placeholder='请输入验证码'
                            onChangeText={(text) => this.setState({sms_code: text})}
                            value={this.state.sms_code}
                        />
                        <TouchableOpacity onPress={this._getCode}>
                            <Text style={styles.getCode}>{this.state.codeTxt}</Text>
                        </TouchableOpacity>
                    </View> 
                    <TouchableOpacity onPress={this._takeMoney}>
                        <View style={styles.btnLogin}><Text style={styles.btnTxt}>确认提币</Text></View>
                    </TouchableOpacity>
                </View>
            </View>
        );
    }
}
const styles = StyleSheet.create({ 
    titleTxt:{
        marginTop: 10,
        marginBottom: 15,
        display:'flex',
        flexDirection:'row',
        alignItems:'center',
        justifyContent:'space-between',
        paddingLeft: 10
    },
    c1:{ 
        color:'#FF7F4B',
        fontSize: 14
    },
    titleC2:{ 
        fontSize: 14,
        alignItems:'center'
    },
    formBox:{
        paddingLeft: 10,
        paddingRight: 10,
    },
    formItem:{
        borderBottomColor:'#cccccc',
        borderBottomWidth: 1,
        height:48,
        width: '100%',
        display:'flex',
        justifyContent:'space-between',
        flexDirection:'row', 
        paddingLeft: 125
    },
    formPswItem:{
        paddingRight: 45
    },
    formLabel:{
        color:'#111111',
        fontSize: 16,
        lineHeight: 45,
        width: 125,
        marginLeft: -125,
        textAlign:'left',
        display:'flex',
        flexDirection:'row',
        justifyContent:'flex-start',
        alignItems: 'center',
    },
    formCodeItem:{
        paddingRight: 80
    },
    formUser:{
        width: '100%'
    },
    formPsw:{
        width: '100%'
    },
    formCode:{
        width: '100%'
    },
    formIcon:{
        width:45,
        lineHeight: 45,
        fontSize: 16,
        textAlign:'right'
    },
    getCode:{
        fontSize: 14,
        color:'#FF7F4B',
        lineHeight: 45
    },
    btnLogin:{
        width: 350,
        height: 40,
        backgroundColor:'#FF7F4B',
        borderRadius: 8,
        marginTop: 20,
        marginLeft: 'auto',
        marginRight:'auto'
    },
    btnTxt:{
        color:'#FFFFFF',
        fontSize: 16,
        textAlign:'center',
        lineHeight: 40,
    },
    labelIco:{
        marginRight:5,
        color:'#FF7F4B',
        fontSize:15
    },
    record:{
    }
});
export default TakeMoneyScreen;